<template>
  <div>
    <Banner :banners="banners" :duration="3000"/>
    <Channels @change="handleChange"/>
    <Loading v-show="isLoading"/>
    <NewsList v-show="!isLoading" :news="news"/>
  </div>
</template>

<script>
import Banner from "../components/Banner";
import Channels from "../components/news/Channels";
import NewsList from "../components/news/NewsList";
import Loading from "../components/Loading";
import {getNews} from '../services/newsService'
export default {
  components: {
    Banner,
    Channels,
    NewsList,
    Loading,
  },
  data() {
    return {
      banners: [
        {
          link: "http://duyi.ke.qq.com",
          url: require("../assets/banners/banner01.png")
        },
        {
          link: "http://duyi.ke.qq.com",
          url: require("../assets/banners/banner02.png")
        },
        {
          link: "http://duyi.ke.qq.com",
          url: require("../assets/banners/banner03.png")
        },
      ],
      news:[],
      isLoading:true
    };
  },
  async created(){
      getNews()
  },
  methods:{
      async handleChange(channelId){
        this.isLoading = true;
        var resp = await getNews(channelId,1,10);
        this.isLoading = false;
        this.news = resp.contentlist;
      }
  }
};
</script>

<style>
</style>